<template>
	<view class="main">
		<u-navbar
			title="个人简历"
			@leftClick="navigateBack"
			safeAreaInsetTop
			fixed
			placeholder
			:autoBack="true"
		></u-navbar>
		<view class="block">
			<view class="block__content">
				<u--form
					labelPosition="left"
					:model="form"
					ref="form"
				>
					<u-form-item
						label="头像"
						prop="avatar"
						borderBottom
						labelWidth="80"
					>
					<u-avatar
						:src="imgURL + form.avatar"
						shape="square"
						@click="selectAvatar"
					></u-avatar>
					</u-form-item>
					<u-form-item
						label="姓名"
						prop="name"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.name"
							border="none"
							placeholder="姓名,只能为中文"
						></u--input>
					</u-form-item>
					<u-form-item
						label="年龄"
						prop="age"
						borderBottom
						labelWidth="80"
					>
						<picker mode="date" :value="form.age" @change="bindDateChange">
							<u--input
								v-model="form.age"
								border="none"
								disabled
								placeholder="出生年月日"
							></u--input>
						</picker>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="手机"
						prop="phone"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.phone"
							border="none"
							placeholder="手机"
						></u--input>
					</u-form-item>
					<u-form-item
						label="性别"
						prop="sex"
						borderBottom
						labelWidth="80"
						@click="showSex = true; hideKeyboard()"
					>
						<u--input
							v-model="form.sex"
							disabled
							placeholder="请选择性别"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="婚姻状态"
						prop="is_hun"
						borderBottom
						labelWidth="80"
						@click="showHun = true; hideKeyboard()"
					>
						<u--input
							v-model="form.is_hun"
							disabled
							placeholder="请选择婚姻状态"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="在职状态"
						prop="sex"
						borderBottom
						labelWidth="80"
						@click="showJob = true; hideKeyboard()"
					>
						<u--input
							v-model="form.job_status"
							disabled
							placeholder="请选择在职状态"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="学历"
						prop="education"
						borderBottom
						labelWidth="80"
						@click="showEducation = true; hideKeyboard()"
					>
						<u--input
							v-model="form.education"
							disabled
							border="none"
							placeholder="学历,例如:本科"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="毕业学校"
						prop="school"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.school"
							border="none"
							placeholder="毕业学校"
						></u--input>
					</u-form-item>
					<u-form-item
						label="工作经验"
						prop="work_y"
						borderBottom
						labelWidth="80"
						@click="showWork = true; hideKeyboard()"
					>
						<u--input
							v-model="form.work_y"
							disabled
							border="none"
							placeholder="工龄"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="职业技能"
						prop="skill"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.skill"
							border="none"
							placeholder="职业技能"
						></u--input>
					</u-form-item>
					
					<u-form-item
						label="期望城市"
						prop="expect_city"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.expect_city"
							border="none"
							placeholder="期望城市"
						></u--input>
					</u-form-item>
					<u-form-item
						label="意向岗位"
						prop="motto"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.remark"
							border="none"
							placeholder="意向岗位"
						></u--input>
					</u-form-item>
					
					<u-form-item
						label="薪资要求"
						prop="salary"
						borderBottom
						labelWidth="80"
						@click="showPicker"
					>
						<u--input
							v-model="form.salary"
							border="none"
							disabled
							placeholder="薪资要求"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="人生规划"
						prop="plan"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.plan"
							border="none"
							placeholder="人生规划"
						></u--input>
					</u-form-item>
					<u-form-item
						label="户籍"
						prop="huji"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.huji"
							border="none"
							placeholder="户籍"
						></u--input>
					</u-form-item>
					<u-form-item
						label="区域"
						prop="areaaddress"
						borderBottom
						labelWidth="80"
					>
						<picker style="width: 100%;" mode="multiSelector" :range="multiArray" :value="multiIndex" @columnchange="multiColumn" @change="multiChange">
							<view :class="areaaddress == null ? 'container-wrap-highest' : ''" style="width: 100%;">
								{{areaaddress || '请选择地区'}}
							</view>
						</picker>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="地址"
						prop="address"
						borderBottom
						labelWidth="80"
					>
						<u--input
							v-model="form.address"
							border="none"
							placeholder="详细地址"
						></u--input>
					</u-form-item>
					<u-form-item
						label="视频"
						prop="video_url"
					>
					<view style="display:flex; justify-content: right;color:blue;" @click="uploadVideo">选择视频</view>
					</u-form-item>
					<u-form-item>
					<video style="width: 650rpx;height: 300rpx;" :src="imgURL + form.video_url"></video>
					</u-form-item>
					<u-form-item>
						<u--textarea
							placeholder="视频简介不低于3个字"
							v-model="form.intro"
							count
							:maxlength='800'
						></u--textarea>
					</u-form-item>
					<u-form-item
						label="是否显示"
						prop="is_open_video"
						borderBottom
						ref="item2"
						labelWidth="80"
					>
						<u-radio-group v-model="form.is_open_video">
							<u-radio
								:customStyle="{marginRight: '16px'}"
								v-for="(item, index) in radiolist"
								:key="index"
								:label="item.label"
								:name="item.name"
							>
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item
						label="作品集"
						prop="license_img"
						labelWidth="80"
					>
					</u-form-item>
					<u-form-item>
						<view style="display: flex;width: 100%;flex-flow: wrap">
						<view class="upload" @click="upload(2)">
							<u-icon
							size="60rpx"
								name="plus"
							></u-icon>
						</view>
						<block v-for="(item,index) in imgs" v-if="imgs">
							<view style="position: relative;display: flex; flex-wrap: wrap;">
								<view style="width: 40rpx;height: 40rpx;position: absolute;z-index: 1;top: -8rpx; right: 12rpx;">
									<u-icon name="close-circle" color="#ff0000" size="24" @click="delimg(index)"></u-icon>
								</view>
								<image @click="shoImg(index)" style="width: 190rpx;height:190rpx;margin-right: 20rpx;margin-bottom: 10rpx;border-radius: 10rpx;" :src="imgURL + item"></image>
							</view>
						</block>
						</view>
					</u-form-item>
				</u--form>
				<u-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></u-button>
				<u-action-sheet
					:show="showSex"
					:actions="actions"
					title="请选择性别"
					description="请选择"
					@close="showSex = false"
					@select="sexSelect"
				>
				</u-action-sheet>
				<u-action-sheet
					:show="showHun"
					:actions="hunlist"
					title="请选择婚姻状况"
					description="请选择"
					@close="showHun = false"
					@select="hunSelect"
				>
				</u-action-sheet>
				<u-action-sheet
					:show="showJob"
					:actions="jobstatuslist"
					title="请选择在职状态"
					description="请选择"
					@close="showJob = false"
					@select="jobSelect"
				>
				</u-action-sheet>
				
				<u-action-sheet
					:show="showWork"
					:actions="worklist"
					title="请选择工龄"
					description="请选择"
					@close="showWork = false"
					@select="workSelect"
				>
				</u-action-sheet>
				<u-action-sheet
					:show="showEducation"
					:actions="educationlist"
					title="请选择学历"
					description="请选择"
					@close="showEducation = false"
					@select="educationSelect"
				>
				</u-action-sheet>
				
				<u-picker
					:show="showSalary"
					:columns="salarylist"
					keyName="salary"
					closeOnClickOverlay
					@cancel="cancel"
					@confirm="PickerChange"
					@close="close"
				></u-picker>
			</view>
		</view>
		<view v-if="free">
			<ksp-cropper mode="free" :width="200" :height="200" :maxWidth="1024" :maxHeight="1024" :url="baseavatar" @cancel="oncancel" @ok="onok"></ksp-cropper>
		</view>
	</view>
</template>

<script>
	import util from "@/utils/utils.js"
	import Tabbar from "@/components/Tabbar"	
	import { UploadBase64 } from '@/api/user.js'
	import { getJobSalary } from '@/api/enterprise.js'
	import { getProvince, getCity,getDistrict} from '@/api/area.js'
	import { saveBasic,getMyResume } from '@/api/resume.js'
	import { imgURL,baseURL } from '@/utils/config'
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				free:false,
				showDatetime:false,
				imgURL:imgURL,
				showSalary:false,
				salarylist:[[],[]],
				form:{
					expect_city:'',
					avatar:'',
					name:'',
					age:'',
					phone:'',
					sex:'',
					is_hun:'',
					job_status:'离职',
					education:'小学',
					school:'',
					work_y:'应届生',
					skill:'',
					remark:'',
					plan:'',
					huji:'',
					province: '',//省
					city:  '',//市
					district: '',//区县
					address:'',
					video_url:'',
					intro:'',
					salary:'',
					is_open_video:1
				},
				imgs:[],
				showEducation:false,
				educationlist:[{
						name: '小学',
					},
					{
						name: '初中',
					},
					{
						name: '中专',
					},
					{
						name: '高中',
					},
					{
						name: '大专',
					},
					{
						name: '本科',
					},
					{
						name: '硕士',
					},
					{
						name: '博士',
					},
				],
				showWork:false,
				worklist:[{
					name: '应届生',
				},
				{
					name: '1-3年',
				},
				{
					name: '3-5年',
				},],
				showHun:false,
				hunlist:[{
						name: '未婚',
					},
					{
						name: '已婚',
					},
					{
						name: '离异',
					},],
				
				radiolist: [{
						label: '显示',
						name:1,
						disabled: true
					},
					{
						label: '不显示',
						name:0,
						disabled: false
					},
				],
				fileList: [],
				disabled1: false,
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				showJob:false,
				showSex: false,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				jobstatuslist: [{
						name: '离职',
					},
					{
						name: '在职(考虑机会)',
					},
					{
						name: '在职(不考虑)',
					}
				],
				multiArray: [],
				multiIndex: [0, 0, 0],
				multiId: [],
				areaaddress:'',
				baseavatar:'',
			}
		},
		onLoad(option) {
			if(option){
				this.getResume()
			}
			this.salarylist = []
			getJobSalary({}).then((res)=>{
				if(res.code == 200){
					this.salarylist.push(res.data)
					this.salarylist.push(res.data)
				}
			})
			this.backendProvince()
		},
		methods: {
			//选择详情
			getResume() {
				getMyResume({}).then(res=>{
					if(res.code == 200){
						this.form.expect_city = res.data.expect_city
						this.form.avatar = res.data.avatar
						this.form.name = res.data.name
						this.form.age = res.data.age
						this.form.phone = res.data.phone
						this.form.sex = res.data.sex
						this.form.is_hun = res.data.is_hun
						this.form.job_status = res.data.job_status
						this.form.education = res.data.education
						this.form.school = res.data.school
						this.form.work_y = res.data.work_y
						this.form.skill = res.data.skill
						this.form.remark = res.data.remark
						this.form.plan = res.data.plan
						this.form.huji = res.data.huji
						this.form.province = res.data.province
						this.form.city = res.data.city
						this.form.district = res.data.district
						this.form.address = res.data.address
						this.form.video_url = res.data.video_url
						this.form.intro = res.data.intro
						this.form.salary = res.data.salary
						this.form.is_open_video = res.data.is_open_video
						this.areaaddress = res.data.province_name+'-'+res.data.city_name+'-'+res.data.district_name
						if(res.data.imgs){
							this.imgs = JSON.parse(res.data.imgs)
						}
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			//选择性别
			sexSelect(e) {
				this.form.sex = e.name
			},
			//选择婚姻状态
			hunSelect(e) {
				this.form.is_hun = e.name
			},
			//工龄
			workSelect(e) {
				this.form.work_y = e.name
			},
			//选择在职状态
			jobSelect(e) {
				this.form.job_status = e.name
			},
			//选择学历
			educationSelect(e) {
				this.form.education = e.name
			},
			
			delimg(index){
				this.imgs.splice(index,1)
			},
			shoImg(index){
				var imgbox = [];
				for(let i in this.imgs){
					imgbox.push(this.imgURL+this.imgs[i])
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			//提交参数
			submit() {
				if (this.form.avatar == "") {
					return uni.showToast({
						icon: 'none',
						title: '请上传头像'
					});
				}
				if (this.form.name == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写姓名'
					});
				}
				if (this.form.age == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写年龄'
					});
				}
				if (this.form.phone == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写手机'
					});
				}
				if (this.form.sex == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择性别'
					});
				}
				if (this.form.is_hun == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择婚姻状态'
					});
				}
				if (this.form.job_status == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择在职状态'
					});
				}
			
				if (this.form.education == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择学历'
					});
				}
				
				if (this.form.school == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写毕业学校'
					});
				}
				
				if (this.form.work_y == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择工龄'
					});
				}
				if (this.form.skill == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写职业技能'
					});
				}
				
				if (this.form.expect_city == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写意向工作城市'
					});
				}
				
				if (this.form.remark == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写意向岗位'
					});
				}
				
				if (this.form.plan == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写人生规划'
					});
				}
				if (this.form.salary == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择薪资要求'
					});
				}
				
				if (this.form.city == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择区域'
					});
				}
				
				if (this.form.address == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写详细地址'
					});
				}
				
				if (this.form.video_url == "") {
					return uni.showToast({
						icon: 'none',
						title: '视频不能为空'
					});
				}
				
				if (this.form.intro == "") {
					return uni.showToast({
						icon: 'none',
						title: '视频简介不能为空'
					});
				}
				
				if (this.imgs.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请上传作品集'
					});
				}
				if(this.imgs.length > 12){
					return uni.showToast({
						icon: 'none',
						title: '作品集最多只能上传12张'
					});
				}
				this.form.imgs = JSON.stringify(this.imgs)
				saveBasic(this.form).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								uni.redirectTo({
									url: '/resume/details'
								});
							}
						});
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			
			//选择薪资要求
			PickerChange(e){
				this.form.salary = e.value[0].salary+"-"+e.value[1].salary
				this.showSalary = false
			},
			//薪资弹窗
			showPicker() {
				this.showSalary = true
			},
			//点击按钮关闭薪资弹窗
			close() {
				this.showSalary = false
			},
			//点击遮罩层关闭薪资弹窗
			cancel() {
				this.showSalary = false
			},
			
			bindDateChange(e) {
				this.form.age = e.detail.value
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			selectAvatar() {
				this.free = true
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.baseavatar = rst.tempFilePaths[0];
					}
				});
			},
			onok(e) {
				console.log(e)
				this.free = false
				let  that = this
				that.free = false
				uni.showLoading({
					title: '上传中'
				});
				this.form.avatar = "";
				const token = uni.getStorageSync('token');
				uni.uploadFile({
						url: baseURL + "/user/Upload",//后台接口
						filePath: e.path,// 上传图片 url
						name: 'file',
						header: {
							'token': token
						},
						success: res => {
							uni.hideLoading()
							console.log("上传后台返回：",res)
							let result = JSON.parse(res.data)
							console.log("json：",res)
							that.form.avatar = result.data;	
							console.log("avatar：",res)
						},
						fail: e => {
								app.error('上传失败');
						}
				});
				return false
				uni.showLoading({
					title: '上传中'
				});
				UploadBase64({img:e.base64}).then((res)=>{
					uni.hideLoading()
					if(res.code == 200){
						that.form.avatar = res.data;	
						console.log(that.form.avatar)
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			
			oncancel() {
				console.log("这里是关闭")
				// url设置为空，隐藏控件
				this.free = false
				this.baseavatar = "";
			},
			
			// 新增图片
			async upload(type) {
				let _this = this;
				if(type== 2 && _this.imgs.length > 12){
					return uni.showToast({
						icon: 'none',
						title: '企业相片最多只能上传12张'
					});
				}
				util.uploadFile("/user/Upload").then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								if(type == 1){
									_this.form.avatar = res.data
								}
								else{
									_this.imgs.push(res.data)
								}
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			
			// 上传视频
			uploadVideo() {
				let _this = this;
				util.chooseVideo("/user/video").then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								_this.form.video_url = res.data
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			//获取省份列表
			backendProvince(){
				getProvince().then(res => {
					let data = res.data
					let arr = []
					let id = []
					this.multiArray[1] = []
					this.multiId[1] = ''
					this.multiIndex[1] = 0
					
					this.multiArray[2] = []
					this.multiId[2] = ''
					this.multiIndex[2] = 0
					data.map(item => {
						arr.push(item.province_name)
						id.push(item.province_id)
					})
					this.multiArray[0] = arr
					this.multiId[0] = id
					this.backendCity(id)
				})
			},
			
			//获取市级列表
			backendCity(id){
				getCity({id:id}).then(res => {
					let data = res.data
					let arr = []
					let id = []
					
					this.multiArray[2] = []
					this.multiId[2] = ''
					this.multiIndex[2] = 0
					data.map(item => {
						arr.push(item.city_name)
						id.push(item.city_id)
					})
					this.multiArray[1] = arr
					this.multiId[1] = id
					this.multiIndex[1] = 0
					this.backendArea(id)
					this.$forceUpdate()
				})
			},
			
			//获取市级列表
			backendArea(id){
				getDistrict({id:id}).then(res => {
					let data = res.data
					let arr = []
					let id = []
					data.map(item => {
						arr.push(item.district_name)
						id.push(item.district_id)
					})
					this.multiArray[2] = arr
					this.multiId[2] = id
					this.multiIndex[2] = 0
					this.$forceUpdate()
				})
			},
			
			// 省市区某一列改变触发事件
			multiColumn(e) {
					let column = e.detail.column
					let index = e.detail.value
					let id = ''
					if(column == 0) {
							this.multiIndex[0] = index
							id = this.multiId[0][index]
							this.backendCity(id)
					}
					if(column == 1) {
							this.multiIndex[1] = index
							id = this.multiId[1][index]
							this.backendArea(id)
					}
					if(column == 2) {
							this.multiIndex[2] = index
					}
			},
			// 省市区确定事件
			multiChange(e) {
				this.form.province = this.multiId[0][this.multiIndex[0]]
				this.form.city = this.multiId[1][this.multiIndex[1]]
				this.form.district = this.multiId[2][this.multiIndex[2]]
				this.areaaddress = this.multiArray[0][this.multiIndex[0]] + '-' + this.multiArray[1][this.multiIndex[1]] + '-' + this.multiArray[2][this.multiIndex[2]]
			},
		
		},
	}
</script>

<style lang="scss">
	.main{
		margin: 50rpx;
		.upload{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 190rpx; 
			height:190rpx;
			margin-right: 20rpx;
			border: 1px solid #ccc; 
			border-radius: 10rpx;  
		}
	}
</style>
